<template>
    <div class="marketing-list">
        <el-form ref="form" class="el-form-box" :model="selectForm">
            <el-form-item>
                <el-select
                    v-model="selectForm.time"
                    class="select-w"
                    @change="changeList"
                >
                    <el-option
                        v-for="(item, index) in optionData.time_data"
                        :key="index"
                        :label="item.name"
                        :value="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-select
                    v-model="selectForm.shopid_yd"
                    class="select-w"
                    @change="changeList"
                >
                    <el-option
                        v-for="(item, index) in optionData.yd_data"
                        :key="index"
                        :label="item.name"
                        :value="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div
            class="list-box comm-list"
            v-infinite-scroll="loadFun"
            v-if="list_data.length > 0"
            :class="list_data.length > 4 ? 'list-ac' : ''"
        >
            <div
                class="list-row"
                :class="item.is_acitve ? 'acitve' : ''"
                v-for="item in list_data"
                :key="item.id"
                @click="getDetailsList(item)"
            >
                <div class="info">
                    <div class="info-box">
                        <div class="title">{{ item.shop_name }}</div>
                        <div class="doc">{{ item.title }}</div>
                        <div class="num-box">
                            <span>拼团人数 {{ item.num_pin }}</span
                            ><span>参与产品 {{ parseFloat(item.num_gd) }}</span>
                        </div>
                        <div class="time-box">
                            <span
                                >活动时效 {{ item.time_from_txt }} 至
                                {{ item.time_to_txt }}</span
                            >
                        </div>
                    </div>
                    <div class="status-box">
                        <span>{{ item.status_txt }}</span>
                    </div>
                </div>
                <div class="data-txt" v-if="activeName != 1">
                    <span>拼团总量 {{ item.num_tuan }}</span
                    ><span>订单总量 {{ item.num_od }}</span
                    ><span>订单金额 {{ item.total_od }}</span>
                </div>
            </div>
        </div>
        <empty v-else />
    </div>
</template>

<script>
import empty from "../comm/empty.vue"

export default {
    components: { empty },
    props: ["selectForm", "list_data", "optionData", "activeName"],
    data() {
        return {};
    },
    methods: {
        initData() {},
        loadFun() {
            console.log('maikehaide')
            parseFloat;
            this.$emit("loadFun");
        },
        getDetailsList(item) {
            this.$emit("getDetailsList", item);
        },
        changeList() {
            this.$emit("changeList");
        },
    },
};
</script>

<style lang="scss" scoped>
.marketing-list {
    ::v-deep.el-form-box {
        display: flex;
        .el-form-item {
            margin-right: 10px;
            .select-w {
                width: 180px;
            }
        }
    }
    .list-box {
        height: calc(100vh - 135px);
        font-size: 14px;
        &.list-ac {
            padding-right: 10px;
        }
        .list-row {
            padding: 10px 0;
            border-radius: 5px;
            margin-bottom: 20px;
            cursor: pointer;
            &:hover {
                background: #fdf6f6;
            }
            &.acitve {
                background: #3e8af9;
                color: #fff;
                pointer-events: none;
                .info {
                    .status-box {
                        color: #fff;
                    }
                }
            }
            &:last-child {
                margin: 0;
            }
            .info {
                padding: 0 10px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .info-box {
                    .title {
                    }
                    .doc {
                    }
                    .num-box {
                        span {
                            margin-right: 20px;
                        }
                    }
                    .time-box {
                        // padding-bottom: 10px;
                    }
                }
                .status-box {
                    color: #999;
                }
            }
            .data-txt {
                margin-top: 10px;
                padding: 0 10px;
                padding-top: 10px;
                border-top: 1px solid #ede7e7;
                span {
                    margin-right: 20px;
                }
            }
        }
    }
}
</style>